<template>
  <div class="BeiJing">
    <button
      @click="fn(0)"
      :class="{ Color: mgeColor }"
      style="
        width: 10vw;
        height: 4vh;
        margin-left: 57.5vw;
        margin-top: 66.5vh;
        border-radius: 10px;
        border: 1px solid #fff;
      "
    >
      教师端
    </button>
    <button
      @click="fn(1)"
      :class="{ Color: pwdColor }"
      style="
        width: 10vw;
        height: 4vh;
        margin-left: 5vw;
        margin-top: 17vh;
        border-radius: 10px;
        border: 1px solid #fff;
      "
    >
      学生端
    </button>

    <button
      style="
        width: 25.2vw;
        height: 6.5vh;
        margin-top: 1vh;
        margin-left: 57.3vw;
        background-color: #1890ff;
        border: 1px solid #fff;
        color: #fff;
        font-weight: 700;
      "
      @click="login"
    >
      登录
    </button>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      mgeColor: true,
      pwdColor: false,
      form: {
        name: "",
        radio: "1",
      },
      number: "0",
    };
  },
  methods: {
    // change: function (index) {
    //   this.number = index;
    // },
    pwdbtn(index) {
      this.number = index;
      this.mgeColor = false;
      this.pwdColor = true;
    },
    mgebtn(index) {
      this.number = index;
      this.mgeColor = true;
      this.pwdColor = false;
    },
    fn(index) {
      this.number = index;
      if (index == 0) {
        this.mgeColor = true;
        this.pwdColor = false;
        // this.magColor = !this.magColor;
        // this.pwdColor = !this.pwdColor;
        // console.log(this.magColor);
        // console.log(this.pwdColor);
      } else if (index == 1) {
        this.mgeColor = false;
        this.pwdColor = true;
        // this.magColor = !this.magColor;
        // this.pwdColor = !this.pwdColor;
      }
    },
    login() {
      if (this.number == 0) {
        console.log("教师端登录");
        localStorage.setItem("teacher", "老师");
        localStorage.removeItem("student");
      } else {
        console.log("学生端登录");
        localStorage.setItem("student", "学生");
        localStorage.removeItem("teacher");
      }
      // this.$router.push('/one');
      this.$router.push("/once");
    },
  },
};
</script>

<style lang="scss" scoped>
.BeiJing {
  height: 100vh;
  // background: url(../assets/one\ .png);
  background: url(../assets/lolo.jpg);

  background-size: 100% 100%;
  position: relative;
}
.Color {
  background-color: #1890ff;
  color: #fff;
}
</style>
